<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>实名认证</title>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <!-- favicons Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/moban5146/assets/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/moban5146/assets/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/moban5146/assets/images/favicons/favicon-16x16.png">
    <link rel="manifest" href="/moban5146/assets/images/favicons/site.webmanifest">
    <meta name="description" content="Pylon Loan HTML Template">

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
          rel="stylesheet">

    <link rel="stylesheet" href="moban5146/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/swiper.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/animate.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/pylon-icons.css">
    <link rel="stylesheet" href="moban5146/assets/css/odometer.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="moban5146/assets/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/nouislider.min.css">
    <link rel="stylesheet" href="moban5146/assets/css/nouislider.pips.css">

    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css/hyzx.css"/>

    <!-- template styles -->
    <link rel="stylesheet" href="/moban5146/assets/css/main.css">

</head>
<body>
<div class="preloader">
    <img class="preloader__image" src="/moban5146/assets/images/loader.png" alt="">
</div><!-- /.preloader -->
<div class="page-wrapper">
    <header class="main-header">
        <div class="topbar">
            <div class="container">
                <div class="topbar__left">
                    <div class="topbar__social">
                        <a href="#" class="fab fa-facebook-square"></a>
                        <a href="#" class="fab fa-twitter"></a>
                        <a href="#" class="fab fa-pinterest-p"></a>
                        <a href="#" class="fab fa-instagram"></a>
                    </div><!-- /.topbar__social -->
                    <a href="#">产品中心</a>
                    <a href="#">金小贷</a>
                    <a href="#">申请贷款</a>
                </div><!-- /.topbar__left -->
                <div class="topbar__right">
                    <a href="#"><i class="pylon-icon-email1"></i>needhelp@company.com</a>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span class="caret" th:text="${session.users}"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
                            <li><a href="lma?loaDown=personal.html" style="margin-left: 10px; color: black;">个人中心</a></li>
                            <li><a href="#" style="margin-left: 10px; color: black;">消息</a></li>
                            <hr>
                            <li><a href="signOut" style="margin-left: 10px; color: black;">退出登录</a></li>
                        </ul>
                    </div>
                </div><!-- /.topbar__right -->
            </div><!-- /.container -->
        </div><!-- /.topbar -->
        <nav class="main-menu">
            <div class="container">
                <div class="logo-box">
                    <a href="index-2.html" aria-label="logo image"><img
                            src="/moban5146/assets/images/logo-dark.png" width="155" alt=""></a>
                    <span class="fa fa-bars mobile-nav__toggler"></span>
                </div><!-- /.logo-box -->
                <ul class="main-menu__list">
                    <li class="dropdown">
                        <a href="index-2.html">首页</a>
                        <ul>
                            <li>
                                <a href="index.html">企业贷款</a>
                            </li>
                            <li class="dropdown">
                                <a href="#">个人贷款</a>
                                <ul>
                                    <li><a href="index.html">信用贷</a></li>
                                    <li><a href="index-2.html">订单贷</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="about.html">品牌合作</a>
                        <ul>
                            <li><a href="team.html">买好车</a></li>
                            <li><a href="team-details.html">中国银行</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="services.html">产品中心</a>
                        <ul>
                            <li><a href="how-it-works.html">金小贷</a></li>
                            <li><a href="credit-card-details.html">信用贷</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="news.html">快捷银行</a>
                        <ul>
                            <li><a href="credit-card">办卡</a></li>
                            <li><a href="news-details.html">转账</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="test.html">金融资讯</a>
                        <ul>
                            <li><a href="how-it-works.html">How It Works</a></li>
                            <li><a href="loan-calculator.html">Loan Calculator</a></li>
                            <li class="dropdown">
                                <a href="credit-card.html">Credit Card</a>
                                <ul>
                                    <li><a href="credit-card.html">Credit Card</a></li>
                                    <li><a href="credit-card-details.html">Credit Card Details</a></li>
                                </ul>
                            </li>
                            <li><a href="faq.html">FAQ</a></li>
                            <li><a href="testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li class="search-btn search-toggler">
                        <a href="#"><i class="pylon-icon-magnifying-glass"></i></a>
                    </li>
                </ul>
                <!-- /.main-menu__list -->

                <div class="main-header__info">
                    <div class="main-header__info-phone">
                        <i class="pylon-icon-tech-support"></i>
                        <div class="main-header__info-phone-content">
                            <span>联系电话</span>
                            <h3><a href="tel:92-666-888-0000">92 666 888 0000</a></h3>
                        </div><!-- /.main-header__info-phone-content -->
                    </div><!-- /.main-header__info-phone -->
                </div><!-- /.main-header__info -->
            </div><!-- /.container -->
        </nav>
        <!-- /.main-menu -->
    </header><!-- /.main-header -->


    <div class="stricky-header stricked-menu main-menu">
        <div class="sticky-header__content"></div><!-- /.sticky-header__content -->
    </div><!-- /.stricky-header -->

    <div id="hy_con">
        <div id="con_lf">
            <h2>账户管理</h2>
            <ul>
                <li class="lf_li1"><a href="lma?loaDown=personal.html">账户信息</a></li>
                <li class="lf_li6"><a href="lma?loaDown=loansLog.html">贷款记录</a></li>
                <li class="lf_li4"><a href="lma?loaDown=sign.html">待签约</a></li>
                <li class="lf_li2"><a href="lma?loaDown=refund.html">待还款</a></li>
                <li class="lf_li3"><a href="lma?loaDown=overdue.html">已逾期</a></li>
                <li class="lf_li3"><a href="weChart.html">积分兑换</a></li>
                <li class="lf_li8"><a href="lma?loaDown=editPsw.html">修改密码</a></li>
            </ul>
        </div>
        <div id="con_rh">
            <!--            <p><img src="imgs/img_2.png"/></p>-->
            <div class="con_rh_con" style="overflow: auto; height: 350px">
                <p class="rh_title">实名认证</p>
                <form id="attFrom" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="control-label col-md-2">营业执照</label>
                        <div class="controls">
                            <!--                            multiple-->
                            <input id="choose-file" type="file" name="fileImg" maxlength="2"
                                   style="position: absolute; opacity: 0; width: 70px;height: 70px; z-index: 200;"
                                   accept="image/gif,image/jpeg,image/x-png,image/png"/>
                            <img th:src="@{/imgs/img.png}" style="width: 50px;z-index: 100;">
                            <div class="file-list" style="width: 70%; margin: 20px auto;">

                            </div>
                            <!-- 模态框（Modal），点击图片放大 -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <img id="imgSrc" src="" alt="" style="width: 100%;"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 cdontrol-label" for="attRequest">营业执照有效期</label>
                        <input type="date" class="col-sm-3" id="attRequest" name="cLicTime" placeholder="请输入营业执照到期时间">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 cdontrol-label" for="optionsRadios0">企业类型</label>
                        <label class="checkbox-inline col-md-2">
                            <input type="radio" name="cType" id="optionsRadios0"
                                   value="0" checked>个人独资
                        </label>
                        <label class="checkbox-inline col-md-2">
                            <input type="radio" name="cType" id="optionsRadios1"
                                   value="1">合伙企业
                        </label>
                        <label class="checkbox-inline col-md-2">
                            <input type="radio" name="cType" id="optionsRadios2"
                                   value="2">有限责任公司
                        </label>
                        <label class="checkbox-inline col-md-2">
                            <input type="radio" name="cType" id="optionsRadios3"
                                   value="3">股份有限公司
                        </label>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="attRequest2">法人姓名</label>
                        <input type="text" class="col-sm-3" id="attRequest2" name="cLegalName" placeholder="请输入法人姓名" required>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="attRequest3">法人证件号</label>
                        <input type="text" class="col-sm-3" id="attRequest3" name="cLegalId" placeholder="请输入法人证件号" required>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="attRequest4">证件有效期限</label>
                        <input type="date" id="attRequest4" class="col-md-3" name="cLegalTime" placeholder="请输入证件到期时间" required>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 right" for="prov">企业地址</label>
                        <!--省份选择-->
                        <select id="prov" class="col-md-3" name="cPro" required>
                            <option value="">=请选择省份=</option>
                        </select>
                        <!--城市选择-->
                        <select id="city" class="col-md-3" name="cCity" onclick="queryCity()" required>
                            <option value="">=请选择城市=</option>
                        </select>

                        <!--县区选择-->
                        <select id="country" class="col-md-3" onclick="queryArea()">
                            <option value="">=请选择县区=</option>
                        </select>

                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="attRequest5">详细地址</label>
                        <input type="text" id="attRequest5" class="col-md-3" name="cAddress" placeholder="请输入企业详细地址" required>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="attRequest6">经营范围</label>
                        <textarea rows="2" id="attRequest6" class="col-sm-3" name="cBusSco" required></textarea>
                    </div>
                    <br>
                    <button id="attButton" type="button" class="btn btn-default btn-lg btn-block" style="background-color: #7abaff" onclick="attSubmit()">提交</button>
                </form>
            </div>
            <!--            <p><img src="imgs/img_3.png"/></p>-->
        </div>
    </div>
    <div class="clear"></div>
    <div id="footer">
        <div class="foot_con">
            公司版权所有<br/>
            Copyright 2012 All rights reserved<br/>
            冀ICP备1234567890号
        </div>
    </div>
</div>

<!-- /.search-popup -->
<a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-angle-up"></i></a>


<script src="moban5146/assets/js/jquery-3.5.1.min.js"></script>
<script src="/moban5146/assets/js/bootstrap.bundle.min.js"></script>
<script src="moban5146/assets/js/swiper.min.js"></script>
<script src="moban5146/assets/js/jquery.ajaxchimp.min.js"></script>
<script src="moban5146/assets/js/jquery.magnific-popup.min.js"></script>
<script src="moban5146/assets/js/jquery.validate.min.js"></script>
<script src="moban5146/assets/js/bootstrap-select.min.js"></script>
<script src="moban5146/assets/js/wow.js"></script>
<script src="moban5146/assets/js/odometer.min.js"></script>
<script src="moban5146/assets/js/jquery.appear.min.js"></script>
<script src="moban5146/assets/js/wNumb.min.js"></script>
<script src="moban5146/assets/js/nouislider.min.js"></script>

<!-- template js -->
<script src="moban5146/assets/js/theme.js"></script>
<script src="/js/jquery.easing.min.js"></script>

<script>
    function attSubmit(){
        var aFrom = new FormData($("#attFrom")[0]);
        aFrom.delete("file");
        for (var i = 0; i < fileList.length; i++) {
            aFrom.append("file", fileList[i]);
        }
        $.ajax({
            type: "post",
            url: "lma/att",
            data: aFrom,
            // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
            contentType: false,// 防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象
            processData: false,// 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象
            dataType: "Json",
            success: function (data){
                if (data && data == true){
                    alert("认证成功");
                    window.location.href="lma?loaDown=personal.html";
                }else {
                    alert("请上传营业执照");
                }
            },
            error:function (){
                alert("提交失败");
            }
        });
    }


    var pId;
    var cId;
    $(function () {
        $.ajax({
            type: "get",
            url: "city/pro",
            dataType: "json",
            success: function (data) {
                var beSelect = "<option value=''>=请选择省份=</option>";
                for (var i = 0; i < data.length; i++) {
                    beSelect += ('<option value=' + data[i].provinceid + '>' + data[i].province + '</option>');
                    $("#prov").empty();
                    $("#prov").append(beSelect);
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    });

    function queryCity() {
        pId = $("#prov").val();
        $.ajax({
            type: "get",
            url: "city/cit",
            data: {cId: pId},
            dataType: "json",
            success: function (data) {
                var cSelect = "";
                for (var j = 0; j < data.length; j++) {
                    cSelect += ('<option value=' + data[j].cityid + '>' + data[j].city + '</option>');
                    // $("#city").empty();
                    $("#city").append(cSelect);
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    function queryArea() {
            cId = $("#city").val();
            $.ajax({
                type: "get",
                url: "city/are",
                data: {aId: cId},
                dataType: "json",
                success: function (data) {
                    var aSelect = "";
                    for (var k = 0; k < data.length; k++) {
                        aSelect += ('<option value=' + data[k].areaid + '>' + data[k].area + '</option>');
                        $("#country").append(aSelect);
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }


    /*
    * 图片上传
    * */
    //选择文件按钮
    $file = $("#choose-file");
    //回显的列表
    $list = $('.file-list');
    //选择要上传的所有文件
    fileList = [];
    //当前选择上传的文件
    var curFile;
    // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src
    $file.on('change', function () {
        //原生的文件对象(File对象数组)，相当于$file.get(0).files[0];
        curFile = this.files;
        //将curFile数组和FileList数组合并
        fileList = fileList.concat(Array.from(curFile));
        for (var i = 0, len = curFile.length; i < len; i++) {
            reviewFile(curFile[i])
        }

    });

    //回显图片
    function reviewFile(file) {
        //实例化fileReader,
        var fd = new FileReader();
        //获取当前选择文件的类型
        var fileType = file.type;
        //调它的readAsDataURL并把原生File对象传给它，
        fd.readAsDataURL(file);//base64
        //监听它的onload事件，load完读取的结果就在它的result属性里了

        fd.onload = function () {
            $list.append('<label class="file-item" style="margin: 20px auto;" ><img onclick="showImage(this)" src="' + this.result + '" alt="" style="width: 100px;height: 100px;"/><i class="file-del" style="position: relative;left:-15px;top: -35px;">&times;</i></label>')
        }
    }

    //删除图片
    $(".file-list").on('click', '.file-del', function () {
        var $parent = $(this).parent();
        var index = $parent.index(".file-item");
        //删除选择的图片
        fileList.splice(index, 1);
        $parent.remove();
    });

    //点击图片显示放大图(使用bootstrap的模态框)
    function showImage(e) {
        $("#imgSrc").attr("src", e.src);
        $('#myModal').modal('show');
    }
</script>
</body>
</html>